<template>
  <div class="container">
    <h3>vue+openlayers: 加载静态图，变成地图一部分</h3>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import Image from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';
import Projection from 'ol/proj/Projection'; // 投影
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let extent = [0, 0, 601, 476]
      let projection = new Projection({
        code: 'proj', // 投影编码
        units: 'pixels', // 单位
        extent: extent // 投影范围 0, 0, 601, 476分别代表左下角的x,y和右上角的x,y
      })
      let myLayer = new Image({
        source: new ImageStatic({
          url: require('@/assets/cat1.jpg'),
          projection: projection, // 投影
          imageExtent: extent // 图片范围
        })
      })
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [myLayer],
        view: new View({
          center: [300, 238],
          zoom: 3,
          projection: projection // 投影
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 750px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 100%;
      height: 720px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>
